<template>
    <div class="warp-2" style="height: 100%;">
        <div id="bcid" ref="bcid" style="opacity: 0;">
            <div style="height: 1px"></div>
        </div>
        <navbar v-show="isShowNav && $store.state.config.iosHeaderShow" :title="freshDetail.itmTitle">
            <template #right>
                <router-link :appStatus="app ? app.appStatus  : null" tag="a" :to="`/detailCertifiedMessage/${app ? app.appItmId : freshDetail.itmId}/${freshDetail.itmExamInd === 0 ? 1 : 0}/${freshDetail && freshDetail.app && freshDetail.app.appStatus ? freshDetail.app.appStatus : 'NotApp'}`" slot="right" class="message-2">
                    <div class="dot" v-if="freshDetail.isRead"></div>
                </router-link>
            </template>
        </navbar>
        <div class="content" :style="{padding:!isShowNav ? '0' : ((!signUpBtn && freshDetail.appId) && !(freshDetail.app && (freshDetail.app.appStatus === 'Pending'||freshDetail.app.appStatus === 'Rejected')))||iosReward ? '56px 0 0' :  '56px 0 57px'}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="">
                <div class="view-body body-content" v-if="freshDetail">
                    <div style="position: relative;">
                        <img :src="freshDetail.itmIcon ? appUrl + freshDetail.itmIcon : ''" alt="" style="width: 100%;height:211px;display: block;"/>
                    </div>
                    <div class="bottom-shadow">
                        <div class="white-bg module-box-19">
                            <div class="title">
                                {{ freshDetail.itmTitle }}
                                <!-- <div :class="{'cur': freshQuery.isCollect}" class="commentFoot-collection" v-if="freshDetail.itmStatus === 'ON'" v-collection="{type: 'Course', id: freshDetail.itmId, isClick: freshQuery.isCollect, count: freshQuery.collectCount, fn: isCollection, showCount: false}"></div> -->
                            </div>
                            <div class="font-size12 color999" style="padding-top: 10px;" v-if="freshDetail.itmContentEffStartDatetime && freshDetail.itmContentEffEndDatetime">
                                <span>{{$t("cos_training_period")}} {{freshDetail.itmContentEffStartDatetime}} - {{freshDetail.itmContentEffEndDatetime}}</span>
                            </div>
                            <div class="font-size12 color999" style="padding-top: 10px;">
                                <div style="display: flex;align-items: center;">
                                    <span>{{$t("cos_inprogress_name")}}</span>
                                    <div class="progress-box">
                                        <van-progress :percentage="freshDetail.progress ? freshDetail.progress : 0"
                                            color="#70B603" :show-pivot="false" track-color="#F2F2F2"/>
                                    </div>
                                    <span style="color:#333333">{{freshDetail.progress ? freshDetail.progress : 0}}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-tab-04">
                        <van-tabs v-model="selected" :ellipsis="false" color="#075ebb" title-active-color="#075ebb" line-width="" duration="0.2"
                            @click="selectType">
                            <van-tab :title="$t('open_detail_course')" :name='0'></van-tab>
                            <van-tab :title="$t('online_courses')" :name='1' v-if="tabCount.onlineCourseCount"></van-tab>
                            <van-tab :title="$t('online_exam_practice')" :name='2' v-if="tabCount.onlineExamCount"></van-tab>
                            <van-tab :title="$t('cos_type_classroom')" :name='3' v-if="tabCount.offlineCourseCount"></van-tab>
                            <van-tab :title="$t('course_evaluation')" :name='4' v-if="tabCount.courseEvaluateCount"></van-tab>
                            <van-tab :title="$t('post_training_exam')" :name='5' v-if="tabCount.trainingExamCount"></van-tab>
                            <van-tab :title="$t('my_certificate')" :name='6' v-if="tabCount.myCertificateCount"></van-tab>
                        </van-tabs>
                    </div>
                    <keep-alive>
                        <router-view @on-hide-bottom="onHideBottom" @getOnFetching="getOnFetching" @iosShowBottom="iosShowBottom" :data='freshDetail' :isIntegrated='isIntegrated' :pageNo="pageNo"></router-view>
                    </keep-alive>
                </div>
            </van-pull-refresh>
            <div style="background:#fff;" v-show="isShowNav && selected !== 3&&!iosReward" class="sign-up-content"
                v-if="freshDetail.itmStatus === 'ON'&&(signUpBtn||(freshDetail.app && (freshDetail.app.appStatus === 'Pending' || freshDetail.app.appStatus === 'Rejected'))||canReStudy)">
                <div class="sign-up-tips-box" v-if="signUpTipsTwo && freshDetail.appTkhId !== 0"> <!--报名模块-->
                    <div class="sign-up-tips">{{ $t("cos_tips_1") }}</div><!--一旦开始学习就不能取消报名-->
                    <em class="tips-close-icon" @click="signUpTipsTwo = false"></em>
                    <em class="triangle-icon-02"></em>
                </div>
                <!-- <div :class="{'cur': freshQuery.isLike}" class="commentFoot-like" v-like="{type: 'Course', id: freshDetail.itmId, isClick: freshQuery.isLike, count: freshQuery.likeCount, fn: isFnLike}" :style="{width:(freshDetail.courseEnum === 'OPEN_COURSE'?'50%':'80px')}">
                    {{ freshQuery.likeCount ? freshQuery.likeCount : 0 }}
                </div>
                <div :class="{'cur': freshQuery.isCollect}" class="commentFoot-collection" v-collection="{type: 'Course', id: freshDetail.itmId, isClick: freshQuery.isCollect, count: freshQuery.collectCount, fn: isCollection}" :style="{width:(freshDetail.courseEnum === 'OPEN_COURSE'?'50%':'80px')}">
                    {{ freshQuery.collectCount ? freshQuery.collectCount : 0 }}
                </div> -->
                <!--我要报名-->
                <template v-if="signUpBtn">
                    <div v-debounce="enrol" class="sign-up">
                    {{ $t("cos_want_signup") }}
                    </div>
                </template>
                    <!--取消报名-->
                <!-- <div class="sign-up-cancel" v-else-if="!signUpBtn && freshDetail.appId">
                    <van-loading text-color="#fff" v-if="isGoing">{{ $t("cos_cancel_the_registration") }}</van-loading>
                    <div @click="cancelEnrol" v-else>
                        {{ $t("cos_cancel_the_registration") }}
                    </div>
                </div> -->
                <!-- 审核中 -->
                <template v-else-if="freshDetail.app && freshDetail.app.appStatus === 'Pending'">
                    <div class="sign-up sign-pend" style="background: #f59a23;">
                    {{$t("pendinging")}}...
                    </div>
                </template>
                <!-- 已拒绝 -->
                <template v-else-if="freshDetail.app && freshDetail.app.appStatus === 'Rejected'">
                    <div v-debounce="() => enrol(true)" class="sign-up sign-reject" style="background: #f59a23;">
                    {{$t("cos_app_rejected")}}
                    </div>
                </template>
                <!--报名再学一次-->
                <div class="sign-up" v-if="canReStudy" @click="contentTipBtnAction">
                    {{ $t("cos_sign_again") }}
                </div>
            </div>
            <!-- 面授课程的底部按钮 -->
            <div style="background:#fff;" v-show="selected === 3" class="sign-up-content">
                <div class="bottom-btns">
                    <div class="btns">
                        <router-link tag="div"  class="left-btn" :to="`/certifiedCourse/leaveList/${freshDetail.itmId}/${this.$route.params.tkhId}`">{{ $t('Leave_application') }}</router-link>
                        <router-link tag="div" class="right-btn" :to="`/certifiedCourse/penaltyRecord/${freshDetail.itmId}/${this.$route.params.tkhId}`">{{ $t('Penalty_record') }}</router-link>
                    </div>
                </div>
            </div>
        </div>
        <!--课程冲突-->
        <van-dialog
        v-model="conflictTips"
        :title="$t('modal_title_notice')"
        :confirmButtonText="$t('sure')"
        >
            <p style="text-align:left;font-size: 14px;color: #999999;"> {{signUpMsg}}</p>
            <div>
                <div>{{ $t("menu_course") }}</div><!--课程-->
                <div @click="jumpParent(item.itmId,0)" style="margin-top: 10px;text-align:left;font-size: 14px;color: #5186f9;"  v-for="(item, index) in conflictCoures" :key="index">{{item.itmTitle}}</div>
            </div>
            <div style="margin-top: 25px;">
                <div>{{ $t("cos_type_class") }}</div><!--班级-->
                <div @click="jump(item.runItmId,0)" style="margin-top: 10px;text-align:left;font-size: 14px;color: #5186f9;"  v-for="(item, index) in conflictCoures" :key="index">{{item.runTitle}}</div>
            </div>
        </van-dialog>
        <!--评分-->
      <van-dialog v-model="selectScore" :show-confirm-button="true" :closeOnClickOverlay="true" confirmButtonColor="#075ebb" @confirm="operateScore()">
         <div style="height:max-content;background-color: #fff;padding: 20px">
           <van-rate v-model="scoreValue" allow-half void-icon="star" void-color="#eee" size="35" gutter="18" color="#ffd21e"/>
         </div>
      </van-dialog>
        <common-loading :isLoading="isLoading"></common-loading>
        <PlayTour ref="playTour" :data="playTour" @playTourSuccessful="playTourSuccessful"></PlayTour>
    </div>
</template>

<script>
import {scrollTab, tabItem} from '@/repeatComponents/scrollTab/index';
import {Button, Dialog, Notify, Rate, Toast, Icon, Progress, Tab, Tabs} from 'vant';
import mixin from '@/components/mixin/Mixin';
import CommonLoading from '@/components/common/loading';
import ShareCommon from '../common/ShareCommon';
import PlayTour from '@/repeatComponents/playTour/PlayTour';
export default {
    name: 'courseDetail',
    components: {
        ShareCommon,
        PlayTour,
        tabItem,
        scrollTab,
        Icon,
        Progress,
        vanToast: Toast,
        Tab,
        Tabs,
        CommonLoading,
        [Button.name]: Button,
        [Rate.name]: Rate,
        'van-dialog': Dialog.Component,
        [Notify.Component.name]: Notify.Component
    },
    mixins: [mixin],
    data() {
        return {
            scan: null,
            scheduleList: [],
            selected: 0,
            type: this.$route.params.type,
            isClass: false, //班级
            isIntegrated: false, //项目式课程
            isOffline: false,
            isSelfStudy: false,
            iosReward: false,
            isOpen: false,
            pageNo: 1,
            course: {},
            item: {}, //课程基本信息
            app: {}, //学员报名信息
            result: 'notapp', //报名结果
            typeKinds: 'cos', //默认课程类型
            userInfo: {}, //用户信息
            signUpBtn: false, //报名按钮
            courseTypes: '', //当前课程的类型
            isSignupBtn: false, //当前课程是否可以报名
            currentState: '', //当前课程的状态
            appStatus: '',
            commentInput: false, //切换评论时隐藏点赞
            lessons: {}, //线下培训日程表
            canReStudy: false,
            signUpTip: false,
            signUpMsg: '',
            conflictTips: false,
            prerequisiteTips: false,
            conflictCoures: [],
            preConditionsCoures: {},
            isTop: false, //下拉刷新
            //isPosition: false, //tab上拉固定
            signUpTipsTwo: false,
            noPermissionPopUp: false, //暂无权限
            commonTips: {
                show: false,
                msg: ''
            },
            isLoading: false,
            text: '',
            freshDetail: {}, // 新的详情参数
            freshModuleList: [], //课件列表
            freshUserInfo: {}, //新的用户信息返回
            freshQuery: {}, //新的点赞以及收藏等数据
            scoreDetail: {}, //评分 scoreDetailDTO
            selectScore: false, //评分选择弹框
            playTour: {
                code: 'ONLINE',
                dataId: this.$route.params.itmId,
                localIntegral: 0
            },
            scoreValue: 5, //默认评分数,
            tabCount: {
                courseEvaluateCount: 0, // 课程评价数量
                myCertificateCount: 0, // 我的证书数量
                offlineCourseCount: 0, // 面授课程数量
                onlineCourseCount: 0, // 线上课程数量
                onlineExamCount: 0, // 线上考试练习数量
                trainingExamCount: 0 // 训后考试数量
            },
            apsType: null, // 报名方式
            isNeedFile: false, // 单位报名时，是否需要报名材料
            isGoing: false, // 是否正在执行
            onFetching: false, // 是否开启滚动加载
            isRefresh: false
        };
    },
    methods: {
        iosShowBottom(val) {
            this.iosReward = val;
        },
        onPulldownTop() {
            this.isRefresh = true;
            this.pageNo = 1;
            setTimeout(() => {
                this.selectType(0);
                this.course = {};
                this.item = {}; //课程基本信息
                this.getFreshDetail();
                this.isRefresh = false;
            }, 900);
        },
        /**
         * 获取开启滚动加载条件 */
        getOnFetching(val) {
            this.onFetching = val;
        },
        //滚动记载方法
        onScrollBottom() {
            if (this.onFetching) {
                this.pageNo += 1;
            }
        },
        /*onScroll(position) {
            if (position > 1000) {
                this.isPosition = true;
            } else {
                this.isPosition = false;
            }
        },*/
        /**
         * 路由跳转
         * @param index
         */
        selectType(index) {
            this.selected = index;
            this.pageNo = 1; // 重置页码为1
            this.onFetching = false;
            let num = Number(index);
            if (num === 2) {
                this.commentInput = true;
            } else {
                this.commentInput = false;
            }
            switch (num) {
            case 0: // 课程信息
                this.$router.replace({path: `/certifiedCourse/${this.$route.params.itmId}/${this.$route.params.tkhId}/composition`, query: {...this.$route.query}});
                break;
            case 1: // 线上课程
                this.$router.replace({path: `/certifiedCourse/${this.$route.params.itmId}/${this.$route.params.tkhId}/onlineCourse`, query: {...this.$route.query, studyFaceInd: this.freshDetail.studyFaceInd}});
                break;
            case 2: // 线上考试
                this.$router.replace({path: `/certifiedCourse/${this.$route.params.itmId}/${this.$route.params.tkhId}/onlineExam`, query: {...this.$route.query, examFaceInd: this.freshDetail.examFaceInd}});
                break;
            case 3: // 面授课程
                this.$router.replace({path: `/certifiedCourse/${this.$route.params.itmId}/${this.$route.params.tkhId}/faceCourse`, query: {...this.$route.query}});
                break;
            case 4: // 课程评价
                this.$router.replace({path: `/certifiedCourse/${this.$route.params.itmId}/${this.$route.params.tkhId}/courseEvaluation`, query: {...this.$route.query, id: this.freshDetail.itmId, appTkhId: this.freshDetail.appTkhId}});
                break;
            case 5: // 训后考试
                this.$router.replace({path: `/certifiedCourse/${this.$route.params.itmId}/${this.$route.params.tkhId}/postTrainingExamination`, query: {id: this.freshDetail.itmId, ...this.$route.query}});
                break;
            case 6: // 我的证书
                this.$router.replace({path: `/certifiedCourse/${this.$route.params.itmId}/${this.$route.params.tkhId}/myCertificate`, query: {id: this.freshDetail.itmId, ...this.$route.query}});
                break;
            }
        },
        /*@不虎新接口 返回课程详情*/
        getFreshDetail() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/detail`,
                params: {
                    itmId: this.$route.params.itmId
                }
            }).then((res) => {
                if (res && res.status === 200) {
                    this.freshDetail = res.data;
                    this.freshModuleList = res.data.contentList;
                    this.isLoading = false;
                    this.app = res.data.app;
                    this.isTop = true;
                    this.scoreDetail = res.data.scoreDetailDTO;
                    this.judgeCourseStatus(res.data.app, res.data.learnerStatus);
                    this.checkOptionScore();
                    //是否报名字段判断
                    this.checkApply(res.data.app, res.data.appTkhId, res.data.appApprovalStatus);
                    this.typeKinds = 'cos';
                    //课程类型
                    var isExam = this.freshDetail.itmExamInd && this.freshDetail.itmExamInd > 0;
                    if (isExam) {
                        this.typeKinds = 'exam';
                    }
                    if (res.data.courseEnum === 'OFF_LINE_COURSE') {
                        this.isClass = true; //是否离线或面授
                        this.isIntegrated = false;
                    }
                    if (res.data.courseEnum === 'ON_LINE_COURSE') {
                        this.isSelfStudy = true;//是否是网上课程
                        this.isIntegrated = false;
                    }
                    if (res.data.courseEnum === 'EXAM_COURSE') {
                        this.isSelfStudy = true;//是否是网上课程
                        this.isIntegrated = false;
                    }
                    if (res.data.courseEnum === 'OFF_EXAM_COURSE') {
                        this.isOffline = true; //是否是离线
                        this.isIntegrated = false;
                    }
                    if (res.data.courseEnum === 'OFF_EXAM_COURSE') {
                        this.isOffline = true; //是否是离线
                        this.isIntegrated = false;
                    }
                    if (res.data.courseEnum === 'OPEN_COURSE') {
                        this.isOpen = true;
                        this.isIntegrated = false;
                    }
                    if (res.data.courseEnum === 'INTEGRATED_COURSE') {
                        //判断进度决定是否可以取消报名
                        let content = res.data.integratedCourseModuleDTO;
                        this.checkIntegratedApply(content);
                        this.isIntegrated = true;
                    }
                    if (res.data.itmRetakeInd === 1 && (res.data.learnerStatus === 'C' || res.data.learnerStatus === 'F')) {
                        this.canReStudy = true;
                    } else {
                        this.canReStudy = false;
                    }
                    this.$store.commit('increment', res.data);
                    if (res.data.itmType === 'CLASSROOM') {
                        this.getScheduleList();
                    }
                    // 重新获取tabs
                    this.tabParamsCount();
                    // 页面跳转
                    this.selected = 0;
                    this.$router.replace({name: 'certifiedComposition', query: {...this.$route.query}});
                    // this.judgeCourseType(res.data.courseEnum);
                }
            }).catch((err) => {
                console.log('err', err);
                if (err.response) {
                    Toast(err.response.data.errMsg);
                }
                this.$router.go(-1);
            });
        },
        getScheduleList() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/lesson/${this.$route.params.itmId}`
            }).then(res => {
                this.scheduleList = res.data;
                this.$store.commit('setScheduleList', res.data);
            });
        },
        /*@不虎新接口 判断课程状态*/
        judgeCourseStatus(app, status) {
            /*当前课程的状态*/
            if (!app) {
                return false;
            }
            let result;
            switch (app.appStatus) {
            case 'Waiting' :
                result = this.$t('cos_in_wait_list'); //等待队列
                break;
            case 'Admitted':
                if (status === 'I') {
                    result = this.$t('cos_app_inprogress');
                } else if (status === 'C') {
                    result = this.$t('cos_app_completed');
                } else if (status === 'F') {
                    result = this.$t('cos_app_fail');
                } else if (status === 'W') {
                    result = this.$t('cos_app_withdrawn');
                }
                break;
            case 'Pending' :
                result = this.$t('cos_app_pending'); //审批中
                break;
            case 'I' :
                result = this.$t('cos_app_inprogress'); //进行中
                break;
            case 'C' :
                result = this.$t('cos_app_completed'); //已完成
                break;
            case 'F' :
                result = this.$t('cos_app_fail'); //未完成
                break;
            case 'W' :
                result = this.$t('cos_app_withdrawn'); //已放弃
                break;
            case 'Rejected' :
                result = this.$t('approve_status_1'); //已拒绝
                break;
            case 'IP' :
                result = this.$t('cos_app_pending'); //审批中
                break;
            }
            this.currentState = result;
        },
        checkIntegratedApply(content) {
            if (content) {
                if (content.compulsoryList && content.compulsoryList.length > 0) {
                    content.compulsoryList.forEach(item => {
                        if (item.courseList && item.courseList.length > 0) {
                            item.courseList.forEach(i => {
                                if (i.learnerStatus) {
                                    this.freshDetail.isLearnerModule = true;
                                }
                            });
                        }
                    });
                }
                if (content.electiveList && content.electiveList.length > 0) {
                    content.electiveList.forEach(item => {
                        if (item.courseList && item.courseList.length > 0) {
                            item.courseList.forEach(i => {
                                if (i.learnerStatus) {
                                    this.freshDetail.isLearnerModule = true;
                                }
                            });
                        }
                    });
                }
            }
        },
        //判断显示报名按钮规则
        checkApply(app, appThkId, approvalStatus) {
            if (app && app.appStatus === 'Rejected') {
                this.signUpBtn = false;
            } else if (approvalStatus === 'PENDING') {
                this.signUpBtn = false;
            } else {
                this.signUpBtn = (!appThkId || appThkId === null || appThkId === undefined);
            }
        },
        /*@不虎新接口 根据课程类型跳转页面*/
        judgeCourseType(type) {
            if (type === 'ON_LINE_COURSE' || type === 'OFF_LINE_COURSE' || type === 'OPEN_COURSE') { //在线课程和面授课程和公开课
                this.isSelfStudy = true;
                if (type === 'OFF_LINE_COURSE') {
                    this.isClass = true; //班级(面授)
                }
                if (this.app) {
                    this.selected = 1; //0 代表详情 1代表内容
                    this.$router.replace({name: 'onlineCourse', query: {...this.$route.query}});
                } else {
                    this.selected = 0;
                    this.$router.replace({name: 'certifiedComposition', query: {...this.$route.query}});
                }
            } else if (this.isIntegrated) {
                if (this.app) {
                    this.selected = 1;
                    this.$router.replace({name: 'onlineCourse', query: {...this.$route.query}});
                } else {
                    this.selected = 0;
                    this.$router.replace({name: 'certifiedComposition', query: {...this.$route.query}});
                }
            // } else if (type === '') {
            //     this.isOffline = true; // 离线
            //     if (this.app) {
            //         this.selected = 1;
            //         this.$router.replace({name: 'certifiedClass'});
            //     } else {
            //         this.selected = 0;
            //         this.$router.replace({name: 'certifiedComposition'});
            //     }
            // }
            } else if (this.isSelfStudy) {
                if (this.app) {
                    this.selected = 1;
                    this.$router.replace({name: 'onlineCourse', query: {...this.$route.query}});
                } else {
                    this.selected = 0;
                    this.$router.replace({name: 'certifiedComposition', query: {...this.$route.query}});
                }
            }
        },
        //开启打赏页面
        toPlayTour() {
            this.$refs.playTour.openPlayTour();
        },
        //打赏成功(){
        playTourSuccessful() {
            this.getIntegral();
            Dialog.alert({
                width: '180px',
                confirmButtonText: this.$t('mall_10'),
                confirmButtonColor: '#00aeef',
                message: this.$t('circle294')
            });
        },
        /*@不虎新接口 获取课程详情点赞*/
        getCourseQuery() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/sns-count`,
                params: {
                    itmId: this.$route.params.itmId
                }
            }).then((res) => {
                if (res && res.status === 200) {
                    this.freshQuery = res.data;
                }
            }).catch((err) => {
                console.log('err', err.response);
            });
        },
        // 获取积分
        getIntegral() {
            this.$axios({
                url: '/app/credit/user'
            }).then(res => {
                this.playTour.localIntegral = res.data || 0;
            });
        },
        // 我来评分
        optionScore() {
            //如果没有评分，则开启评分
            if (this.scoreDetail.studentScore === null && this.freshDetail.learnerStatus !== null) {
                this.scoreValue = 5;
                this.selectScore = true;
            }
        },
        // 操作评分
        operateScore() {
            //先判断课程是否完成
            if (this.freshDetail.learnerStatus !== 'C') {
                Toast(this.$t('standard_need_apply'));
                return false;
            }
            let temp = {
                courseScore: this.scoreDetail.courseScore,
                csId: this.scoreDetail.csId,
                itmId: this.freshDetail.itmId,
                score: this.scoreValue * 2,
                tkhId: this.freshDetail.appTkhId
            };
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/course/score`,
                data: temp
            }).then(res => {
                Toast(this.$t('standard_apply_success'));
                this.getFreshDetail();
            }).catch(() => {
                Toast(this.$t('standard_need_apply'));
            });
        },
        // 判断是否评分接口
        checkOptionScore() {
            this.$axios({
                url: '/app/api/trainee/course/detail/score',
                params: {
                    itmId: this.$route.params.itmId
                }
            }).then(res => {
                this.scoreDetail.courseScore = res.data.courseScore;
                this.scoreDetail.studentScore = res.data.studentScore;
            });
        },
        jumpStatus(id, tkhId, appStatus, isIntegrated) {
            if (this.app && this.app.appStatus && this.app.appStatus !== 'IP' && this.app.appStatus !== 'Pending' && this.app.appStatus !== 'Waiting') {
                let itmId = id;
                this.$router.push({path: `/learningState/${itmId}/${tkhId}`});
            }
        },
        /*现在状态位只有一个暂不需要该方法*/
        getAppStatus(app, courseEvaluation) {
            var result = 'notapp'; //默认未报名
            if (courseEvaluation && courseEvaluation.cov_status) {
                result = courseEvaluation.cov_status;
            } else if (app) {
                result = app.app_status;
            }
            return result;
        },
        /*报名-原产品逻辑*/
        enrol(isApproval = false) {
            if (this.freshDetail.app && this.freshDetail.app.appStatus === 'Pending') {
                return false;
            }
            if (this.signUpBtn || isApproval) { //报名
                this.$axios({
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    },
                    url: `/app/api/trainee/course/sign-in`,
                    data: this.freshDetail.itmId
                }).then(res => {
                    //403 不允许重读  // 402 名额已满  // 403 不可重读 // 401 非目标学员不允许报名
                    if (res.data && res.data.keyList && res.data.keyList.length > 0) { //有先修课程
                        let title = '';
                        res.data.keyList.forEach((v, index) => {
                            title += (index + 1) + '.' + v + '';
                        });
                        Toast(this.$t('following_prerequisite_courses', {'value': title}));
                        return false;
                    }
                    this.getFreshDetail();
                    this.selectType(0);
                    this.signUpTipsTwo = true;
                    Toast(this.$t('enroll_success'));
                }).catch(err => {
                    let msg = err.response.data.errCode;
                    switch (msg) {
                    case 'ERROR_BEFORE_APPLICATION_TIME':
                        msg = this.$t('cos_sign_up_not_permitted_1');
                        break;
                    case 'ERROR_AFTER_APPLICATION_TIME':
                        msg = this.$t('cos_sign_up_not_permitted_2');
                        break;
                    default:
                        msg = err.response.data.errMsg;
                    }
                    Toast(msg);
                });
            }
        },
        /**
         * 报名-白银逻辑 */
        toSignUp() {
            if (this.isNeedFile) {
                this.$router.push({path: `/certifiedCourse/material/${this.$route.params.itmId}/${this.$route.params.tkhId}`});
            } else {
                this.$axios({
                    method: 'POST',
                    url: '/app/api/trainee/user/apply/submit',
                    data: {
                        itmId: this.$route.params.itmId,
                        paths: []
                    }
                }).then(res => {
                    if (this.apsType === 1 || (this.apsType === 2 && this.isNeedFile)) {
                        Toast.success(this.$t('registration_successful'));
                    }
                    this.getFreshDetail();
                    this.signUpTipsTwo = true;
                    Toast(this.$t('enroll_success'));
                });
            }
        },
        /**
         * 获取报名方式
         * 单位报名/个人报名
         * */
        getSingUpWay() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/user/apply/getAeItemSetting',
                params: {
                    itmId: this.$route.params.itmId
                }
            }).then(res => {
                // if (res.data.apsType === 1 || (res.data.apsType === 2 && res.data.apsIsNeedFile === 1)) {
                //     this.isShowSign = true;
                //     this.isShowLearn = false;
                // } else {
                //     this.isShowSign = false;
                //     this.isShowLearn = true;
                // }
                this.apsType = res.data.apsType;
                this.isNeedFile = (res.data.apsType === 2 && res.data.apsIsNeedFile === 1) || false;
            });
        },
        /**
         * 取消报名-原产品逻辑
         */
        cancelEnrol() {
            if (!this.signUpBtn && !this.freshDetail.isLearnerModule) {
                this.isGoing = true;
                this.$axios({
                    method: 'DELETE', // 原产品逻辑
                    // method: 'POST',
                    url: `/app/api/trainee/course/sign-in`, // 原产品逻辑
                    // url: `/app/api/trainee/user/apply/cancel-apply`, //白银逻辑
                    params: {appId: this.freshDetail.appId}
                }).then(res => {
                    this.getFreshDetail();
                    this.selectType(0);
                    // 要成功的话需要返回一个  userInfo.getCurrentRole()  后台需要
                    //如果成功的话
                    Toast(this.$t('delete_enroll'));
                    this.isGoing = false;
                }).catch((error) => {
                    if (error) {
                        Toast(this.$t(error.response.data.errMsg));
                        this.isGoing = false;
                    }
                });
            } else {
                this.signUpMsg = this.$t('cos_tips_1');
                this.signUpTipsTwo = true;
            }
        },
        contentTipBtnAction() {
            this.enrol(true);
        },
        jump(id, tkhId) {
            this.conflictTips = false;
            this.prerequisiteTips = false;
            let itmId = this.wbEncryptor(id);
            this.$router.push({path: `/certifiedCourse/${itmId}/${tkhId}`});
        },
        isCollection(action, res) {
            if (action === 'add') {
                Toast(this.$t('collect_success'));
            } else if (action === 'cancel') {
                Toast(this.$t('collect_cancel'));
            }
        },
        isFnLike(action, res) {
            if (action === 'add') {
                Toast(this.$t('circle276'));
            } else if (action === 'cancel') {
                Toast(this.$t('circle277'));
            }
        },
        onHideBottom(type) {
            this.commentInput = type;
        },
        /**
         * tab控制显隐 */
        tabParamsCount() {
            if (this.freshDetail.app && (this.freshDetail.app.appStatus === 'Pending' || this.freshDetail.app.appStatus === 'Rejected')) {
                this.tabCount = {
                    courseEvaluateCount: 0, // 课程评价数量
                    myCertificateCount: 0, // 我的证书数量
                    offlineCourseCount: 0, // 面授课程数量
                    onlineCourseCount: 0, // 线上课程数量
                    onlineExamCount: 0, // 线上考试练习数量
                    trainingExamCount: 0 // 训后考试数量
                };
                return false;
            }
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/getCourseParamsCount`,
                params: {
                    itmId: this.$route.params.itmId
                }
            }).then((res) => {
                this.tabCount = res.data;
            });
        }
    },
    mounted() {
        // this.getDetail();
        this.getFreshDetail();
        this.getCourseQuery();
        // this.getIntegral();
        // 获取报名方式
        // this.getSingUpWay();
        //用户信息
        // this.$axios({
        //     method: 'GET',
        //     url: '/app/user/single/info'
        // }).then((res) => {
        //     this.userInfo = res.data.result.info;
        // });
        /*@不虎新接口 获取用户信息*/
        this.$axios({
            method: 'GET',
            url: `/app/api/trainee/my/detail`
        }).then((res) => {
            this.freshUserInfo = res.data;
        }).catch((err) => {
            console.log(err);
        });
        // 调用摄像头权限
        if (window.plus) {
            let scan = new window.plus.barcode.Barcode('bcid');
            this.scan = scan;
            this.$nextTick(() => {
                this.scan.close();
            });
        }
    },
    created() {
        this.tabParamsCount();
    },
    watch: {
        '$route.params.itmId'() {
            if (this.$route.params.itmId) {
                this.getFreshDetail();
                this.getCourseQuery();
                // this.getIntegral();
                this.isOffline = false;
                this.isClass = false;
                this.isIntegrated = false;
                this.isSelfStudy = false;
                this.signUpBtn = false;
                this.isSignupBtn = false;
                this.commentInput = false;
                this.course = {};
            }
        }
    },
    computed: {
        isShowNav() {
            return this.$store.getters.getIsShowNav;
        },
        checkCourseScore() {
            return function(score) {
                if (score) {
                    return score.toFixed(1);
                }
                return 0;
            };
        }
    },
    beforeRouteLeave(to, from, next) {
        if (this.scan) {
            this.scan.close();
        }
        next();
    }
};
</script>

<style scoped lang="less">
    /deep/.van-button--mini {
      height: 30px;
      padding: 1px 8px;
      font-size: 10px;
    }
    .position-box-cur {
        position: fixed;
        top: 44px;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .module-box-19 {
        padding: 30px 15px;
        .title-play-tour{
          line-height: 20px;
          font-size: 22px;
          color: #666;
          padding-top: 5px;
        }
        .title {
            font-weight: bold;
            font-size: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .commentFoot-collection{
                width: 35px;
            }
        }
        .word-title-09 {
            margin-right: 10px;
            height: 18px;
            line-height: 19px;
            display: inline-block;
        }
    }
    .public-mobile-icon:before {
        content: '';
        width: 26px;
        height: 19px;
        background-size: 19px;
        background-position: 0 -61px;
    }
    .public-mobile-icon.cur:before {
        content: '';
        background-position: 0 -303px;
    }
    .recommend-box-02 {
        margin: 3px 5px;
        display: inline-block;
        padding: 0 10px;
        line-height: 18px;
        background: #e6e6e6;
        border-radius: 6px;
        border-top-left-radius: 0;
        font-size: 10px;
    }
    .learning-type-box {
        width: calc(100% - 30px);
        height: 60px;
        background: rgba(0,0,0,0.5);
        padding: 0 15px;
        box-sizing: border-box;
        position: absolute;
        bottom: 30px;
        right: 0;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        p {
            color: #ffffff;
            display: inline-block;
            line-height: 60px;
            float: left;
        }
    }
    .user-pic-3 {
        border: 1px solid #ffffff;
        display: inline-block;
        margin: 10px 10px 0 0;
        float: left;
    }
    .btn-blue {
        float: right;
        margin-top: 18px;
        padding: 0 15px;
        border-radius: 15px;
        height: 24px;
        line-height: 24px;
        color: #ffffff;
        background: transparent;
        &.cur{
            background: #075ebb;
        }
    }

    .sign-up-content{
        display: flex;
        height: 56px;
        border-top: 1px solid #cccccc;
        justify-content: center;
        align-content: center;
        align-items: center;
        position: absolute;
        width: 100%;
        z-index: 1;
        .sign-up{
            width: 80%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: #075ebb;
            color: #ffffff;
            border-radius: 20px;
            &.cur{
                background: #E6E6E6;
                color: #cccccc;
            }
        }
        .sign-up-cancel{
            width: 80%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: #075ebb;
            border-radius: 20px;
            color:#fff;
        }
        .bottom-btns{
            position: fixed;
            bottom: 0;
            left: 0;
            height: 56px;
            width: 100%;
            background: #fff;
            border-top: 1px solid #eee;
            padding: 0 16px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            .btns{
                display: flex;
                width: 100%;
                .left-btn, .right-btn{
                    width: 50%;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    color:#fff;
                }
                .left-btn{
                    background: #075ebb;
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                }
                .right-btn{
                    background: #f59a23;
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                }
            }
        }
    }
    .schedule-box {
        height: 60px;
        line-height: 60px;
        background: #f5f5f5;
        padding: 0 15px 0 44px;
        .schedule-icon {
            margin-left: -29px;
            float: left;
            width: 20px;
            height: 20px;
            background: url(./images/schedule.png) no-repeat 0 0;
            background-size: 19px;
            margin-top: 20px;
        }
        p {
            float: left;
        }
        .arrow-right {
            margin-top: 24px;
        }
    }
    .message-1{
        width: 45px;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
        &:before{
            content: '';
            display: block;
            width: 21px;
            height: 21px;
            background: url(./images/message.png) no-repeat 0 -5px;
            background-size: 20px;
        }
    }
    .message-2{
        width: 45px;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
        &:before{
            content: '';
            display: block;
            width: 21px;
            height: 21px;
            background: url(./images/bell.png) no-repeat 0 0;
            background-size: 20px;
        }
    }
    .dot{
        position: absolute;
        background: red;
        width: 8px;
        height: 8px;
        border: 1px solid #fff;
        border-radius: 50%;
        top: 15px;
        right: 13px;
    }
    .selectPopup-body .con-box {
        max-height: 300px;
        overflow-y: auto;
        margin-top: 10px;
    }
    .selectPopup-body .font-size16 {
        font-size: 16px;
    }
    .selectPopup .selectPopup-body ul.list-01 li {
        margin-bottom: 15px;
        &:nth-of-type(1) {
            margin-top: 0;
        }
    }
    .disc-icon {
        float: left;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #1f53cc;
        margin: 7px 8px 0 0;
    }
    /*报名提示*/
    .sign-up-tips-box {
        position: fixed;
        right: 15px;
        z-index: 2;
    }
    .triangle-icon-02 {
        right: 25px;
    }
    .box-tab-04 {
        width: 100%;
        height: 50px;
        line-height: 58px;
        background: #ffffff;
        margin-top: 16px;
        border-bottom: 2px solid #e6e6e6;
        ul {
            height: 100%;
            li {
                float: left;
                // width: calc(100% / 3);
                padding: 0 15px;
                height: calc(100% - 2px);
                text-align: center;
                font-size: 16px;
                border-bottom: 2px solid transparent;
                &.cur {
                    border-bottom: 2px solid #075ebb;
                    color: #075ebb;
                    font-weight: bold;
                }
            }
        }
    }
    .box-tab-04-2 ul li {
        width: calc(100% / 2);
    }
    .progress-box{
        width: 120px;
        margin: 0 10px;
    }
    /deep/ .van-tabs__line{
        width: 20px;
        height: 2px;
        bottom: 20px;
    }
</style>
